<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册页面</title>
    <link rel="stylesheet" href="./css/userReg.css">
</head>

<body>
    <!-- 用户注册界面 -->

    <form action="/reg" method="post">
        <ul class="box">
            <!-- 用户名输入框 -->
            <li class="f1">
                <input type="text" placeholder="请输入用户名" id="uname" name="uname">
                <span id="msg1">&nbsp;</span>
            </li>
            <li class="f2">
                <input type="password" placeholder="请输入密码" id="upwd" name="upwd">
                <span id="msg2">&nbsp;</span>
            </li>
            <li class="f3">
                <input type="text" placeholder="请输入手机号" id="phone" name="phone">
                <span id="msg3">&nbsp;</span>
            </li>
            <li class="f4">
                <input type="text" placeholder="请输入邮箱" id="email" name="email">
                <span id="msg4">&nbsp;</span>
            </li>
            <li class="f5">
                <input type="checkbox" id="xieyi" value="1"><label for="xieyi">请勾选用户协议</label>
            </li>
            <li class="f6">
                <input type="submit" id="btn" value="点击注册"></input>
            </li>
        </ul>
    </form>


    <script>
        // 用户名失去焦点事件
        uname.onblur = function () {
            // 使用AJAX
            let xhr = new XMLHttpRequest()
            xhr.open('GET', "v1/users/check_name?uname=" + uname.value)

            xhr.onload = function () {
                // 判断用户名不能为空
                if (uname.value) {
                    msg1.innerHTML = xhr.responseText
                } else {
                    msg1.innerHTML = '用户名不能为空'
                }
            }
            xhr.send()
        }

        // 密码失去焦点事件
        upwd.onblur = function () {
            // 判断密码不能为空
            if (!upwd.value) {
                msg2.innerHTML = '密码不能为空'
            }
        }

        // 手机失去焦点事件
        phone.onblur = function () {
            let xhr = new XMLHttpRequest()
            xhr.open('GET', '/v1/users/check_phone?phone=' + phone.value)
            xhr.onload = function () {
                // 判断手机号不能为空
                if (phone.value) {
                    msg3.innerHTML = '手机号不能为空'
                }
                // 判断手机号格式是否正确
                if (!/^1[3-9]\d{9}$/.test(phone.value)) {
                    msg3.innerHTML = '手机号码格式错误'
                } else {
                    msg3.innerHTML = xhr.responseText
                }
            }
            xhr.send()
        }

        // 邮箱失去焦点事件
        email.onblur = function () {
            let xhr = new XMLHttpRequest()
            xhr.open('GET', '/v1/users/check_email?email=' + email.value)
            xhr.onload = function () {
                // 判断邮箱不能为空
                if (!email.value) {
                    msg4.innerHTML = '邮箱不能为空'
                }
                // 检测邮箱格式是否正确
                if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(email.value)) {
                    msg4.innerHTML = '该邮箱格式错误'
                } else {
                    msg4.innerHTML = xhr.responseText
                }
            }
            xhr.send()
        }
        // 勾选用户协议之后才可以点击提交


        // 点击提交，在提交完之后返回到首页indexOf
        btn.onclick = function () {
            // 在点击提交的时候前面的输入框的要求都以符合，所以直接进行AJAX四部曲
            let xhr = new XMLHttpRequest()
            // 注册过程传参不可以见，所以采用post
            let url = "http:127.0.0.1:3000/v1/users/reg"
            // post 传参需要传参主体
            let date = `uname=${uname}$upwd=${upwd}&phone=${phone}&email=${email}`
            xhr.open('POST', url)
            //设置请求头信息
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=UTF-8')

            xhr.onload = function () {
                alert = xhr.responseText
            }
            xhr.send(date)
        }
    </script>
</body>

</html>